<template>
	<div>
		<div class="games-sports">
			<div class="banner">
				<div class="v-responsive__sizer"></div>
				<div class="v-image__image--cover"></div>
				<div class="v-responsive__content">
					<div class="pageBanner">
						<div class="bannerTitle">
							<h1 class="bannerDecoLine">
								電子
								<span>e-game</span>
							</h1>
							<h2 class="py-2">捕抓IN遊戲!首玩老虎機獎金大贈送</h2>
						</div>
					</div>
				</div>
			</div>
			<div class="gameItems">
				<div class="row">
					<div class="game-list">
						<div class="item" @click="getGame('JK1')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg1"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">JK電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('CQ')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg2"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">CQ9電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('JD')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg3"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">JDB電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('GB')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg4"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">BBIN電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('PG')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg5"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">PG電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('PR')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg6"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">PP電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('FC')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg7"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">FC電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('FK')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg8"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">FK電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('DS')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg9"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">DS電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('P3')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg10"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">RT電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('SG')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg11"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">SG電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('HB')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg12"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">HB電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="game-list">
						<div class="item" @click="getGame('L4')">
							<div class="v-image">
								<div class="v-responsive__sizer" style="padding-bottom: 161.812%;"></div>
								<div class="v-image__image bg13"></div>
								<div class="v-responsive__content">
									<div class="v-overlay">
										<div class="v-overlay__scrim"></div>
									</div>
									<div class="stationName maintainInfo">
										<div class="text-subtitle-1">LIVE22電子</div>
										<div class="btn" v-if="!token">请先登入</div>
										<div class="btn" v-else>进入游戏</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<loading v-if="isLoadingShow"></loading>
		<el-dialog title="" :visible.sync="centerDialogVisible" width="30%" :show-close='false'
			style="margin-top: 20vh;z-index: 9999;" center>
			<div class="boxdNUm">
				<div class="title">
					<div>JOKER</div>
				</div>
				<div class="langlist">
					<div class="descIt" @click="iframe_s2('JK1')">
						X1
					</div>
					<div class="descIt" @click="iframe_s2('JK2')">
						X2
					</div>
					<div class="descIt descItTow" @click="iframe_s2('JK5')">
						X5
					</div>
					<div class="descIt descItTow" @click="iframe_s2('JK10')">
						X10
					</div>
					<div class="descIt descItTow" @click="iframe_s2('JK20')">
						X20
					</div>
				</div>
			</div>
		</el-dialog>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import {
		playGame
	} from "../../utils/api.js"
	import loading from '../../components/loading.vue'
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				tab: 0,
				isLoadingShow: false,
				centerDialogVisible: false,
				token: false,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loading,
			loadingFour
		},
		created() {},
		mounted() {
			if (localStorage.getItem('token')) {
				this.token = true
			} else {
				this.token = false
			}
			// if(localStorage.getItem('show')==1){
			// 	this.isLoadingShow = true
			// 	// window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
			// }
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getGame(type) {
				if (!localStorage.getItem('token')) {
					this.$emit('getShowLogin', true)
					return false;
				}
				if (type == 'JK1') {
					this.centerDialogVisible = true;
					return false;
				}
				this.isLoadingShow = true;
				// window.open('http://43.198.233.28/game/playGame?api_code=' + type + '&game_type=SL&token=' + localStorage.getItem('token') + '&game_id=', '_blank')
				let data = {
					api_code: type,
					game_type: 'SL',
					token: localStorage.getItem('token'),
					game_id: '',
				}
				let url = "";
				var wyWindow = "";
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
					// wyWindow = window.open(location.href, "_blank");
				}, 100);
				// localStorage.setItem('show',1)
				playGame(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data);
						// this.isLoadingShow = false;
						if (res.url) {
							url = res.url;
							wyWindow.location = url;
							// window.open('https://www.aies.cn/', '_blank')
							// window.open(res.url, '_blank')
						}
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(401);
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					// localStorage.removeItem('show')
					this.isLoadingShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			iframe_s2(apicode) {
				let that = this;
				this.isLoadingShow = true;
				this.centerDialogVisible = false;
				let url = "";
				var wyWindow = "";
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
					// wyWindow = window.open(location.href, "_blank");
				}, 100);
				// window.open('http://43.198.233.28/game/playGame?api_code=' + type + '&game_type=SL&token=' + localStorage.getItem('token') + '&game_id=', '_blank')
				let data = {
					api_code: apicode,
					game_type: 'SL',
					token: localStorage.getItem('token'),
					game_id: '',
				}
				playGame(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data);
						if (res.url) {
							url = res.url;
							wyWindow.location = url;
							// window.open('https://www.aies.cn/', '_blank')
							// window.open(res.url, '_blank')
						}
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(401);
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					this.isLoadingShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
		}
	}
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.games-sports {
		background: url('../../assets/newimg/bg.jpg') top;
		background-attachment: fixed !important;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom;
		flex: 1 1 auto;
		backface-visibility: hidden;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		max-width: 100%;
		position: relative;
	}

	.banner {
		min-width: 100%;
		max-width: 100%;
		color: #fff;
		z-index: 0;
		position: relative;
		overflow: hidden;
		display: flex;
	}

	.v-responsive__sizer {
		transition: padding-bottom .2s cubic-bezier(.25, .8, .5, 1);
		flex: 1 0 0px;
		padding-bottom: 18.75%;
	}

	.v-image__image--cover {
		background-image: url('../../assets/newimg/banner2.jpg');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.v-responsive__content {
		margin-left: -100%;
		flex: 1 0 0px;
		max-width: 100%;
	}

	.pageBanner {
		max-width: 1280px;
		height: 100%;
		margin-right: auto !important;
		margin-left: auto !important;
		justify-content: center !important;
		flex-direction: column !important;
		display: flex !important;
		background-color: transparent !important;
		border-color: transparent !important;
		box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12);
		color: #fff;
	}

	.bannerTitle {
		text-shadow: 0 0 3px #000;
		width: 55%;
		color: #e9e9e9;
	}

	.bannerDecoLine {
		text-transform: uppercase !important;
		width: 100%;
		margin: 0;
	}

	.bannerDecoLine::after {
		content: " ";
		height: 1px;
		display: block;
		width: 100%;
		background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 50%, hsla(0, 0%, 100%, 0));
		text-decoration: inherit;
		vertical-align: inherit;
	}

	.py-2 {
		margin: 0;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.gameItems {
		min-height: 500px;
		width: 1280px;
		padding: 12px !important;
		margin-right: auto !important;
		margin-left: auto !important;
		background-color: transparent !important;
		border-color: transparent !important;
		box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12);
		color: #fff;
	}

	.gameItems:before {
		content: " ";
		height: 26px;
		width: 100%;
		margin: 0 auto;
		background: url('../../assets/newimg/line.png') no-repeat top;
		display: block;
		text-decoration: inherit;
		vertical-align: inherit;
	}

	.row {
		margin-top: 12px !important;
		align-items: center !important;
		justify-content: flex-start !important;
		margin: -4px;
		margin-bottom: 0;
		flex: 1 1 auto;
		display: flex;
		flex-wrap: wrap;
	}

	.game-list {
		padding: 4px;
		width: 100%;
		flex: 0 0 16.6666666667%;
		max-width: 16.6666666667%;
	}

	.item {
		box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
		background-color: #1e1e1e;
		color: #fff;
		border-radius: 10px !important;
		border-width: thin;
		display: block;
		max-width: 100%;
		outline: none;
		text-decoration: none;
		transition-property: box-shadow, opacity;
		word-wrap: break-word;
		position: relative;
		white-space: normal;
	}

	.v-image {
		height: 250px;
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
		color: #fff;
		position: relative;
		overflow: hidden;
		flex: 1 0 auto;
		max-width: 100%;
		display: flex;
		z-index: 0;
	}

	.v-image__image {
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.bg1 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/JK.jpg');
	}

	.bg2 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/CQ9.jpg');
	}

	.bg3 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/JDB.jpg');
	}

	.bg4 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/BBIN.jpg');
	}

	.bg5 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/PG.jpg');
	}

	.bg6 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/PP.jpg');
	}

	.bg7 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/FC.jpg');
	}

	.bg8 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/FK.jpg');
	}

	.bg9 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/DS.jpg');
	}

	.bg10 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/RT.jpg');
	}

	.bg11 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/SG.jpg');
	}

	.bg12 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/HB.jpg');
	}

	.bg13 {
		background-image: url('https://hkgame.s3.ap-east-1.amazonaws.com/pc/dz/LIVE22.jpg');
	}

	.v-overlay {
		z-index: 5;
		color: #fff;
		align-items: center;
		border-radius: inherit;
		display: flex;
		justify-content: center;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		transition: .3s cubic-bezier(.25, .8, .5, 1), z-index 1ms;
		position: absolute;
	}

	.v-overlay__scrim {
		border-color: rgb(33, 33, 33);
		opacity: 0;
		background: #000 !important;
		border-radius: inherit;
		bottom: 0;
		height: 100%;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: inherit;
		width: 100%;
		will-change: opacity;
	}

	.stationName {
		padding: 8px !important;
		flex-direction: column !important;
		display: flex !important;
		line-height: 1rem;
		letter-spacing: -.04rem;
		width: 100%;
		position: absolute;
		bottom: 0;
		background: linear-gradient(0deg, #000, transparent);
		color: #e9e9e9;
		text-shadow: 0 0 3px rgba(0, 0, 0, .7);
	}

	.text-subtitle-1 {
		font-size: 1rem !important;
		font-weight: 400;
		line-height: 1.75rem;
		letter-spacing: .009375em !important;
		font-family: "Roboto", sans-serif !important;
	}

	.item:hover {
		margin-top: -5px;
		transition: .2s;
		box-shadow: 0 2px 2px rgba(164, 113, 267, .3), 0 4px 4px rgba(164, 113, 267, .3), 0 8px 8px rgba(164, 113, 267, .3), 0 16px 16px rgba(164, 113, 267, .3), 0 32px 32px rgba(164, 113, 267, .3);

		.v-overlay__scrim {
			opacity: 0.46;
		}

		.maintainInfo {
			position: absolute;
			bottom: 5px;
			left: 50%;
			transform: translate(-50%);
			background: rgba(0, 0, 0, .7);
			z-index: 30;
			width: 95%;
			height: fit-content;
			padding: 5px 10px;
			display: block;
			margin: 0 auto;
			text-align: center;
			border-radius: 5px;
		}

		.maintainInfo::after {
			bottom: 100%;
			left: 50%;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border: 7px solid rgba(3, 4, 5, 0);
			border-bottom-color: rgba(0, 0, 0, .7);
			margin-left: -7px;
		}

		.btn {
			display: block;
		}
	}

	.btn {
		display: none;
		width: 86px;
		height: 35px;
		font-size: 14px;
		color: #fff;
		background-color: #272727;
		text-align: center;
		line-height: 35px;
		border-radius: 4px;
		z-index: 35;
		cursor: pointer;
		position: absolute;
		top: -100px;
		left: 50%;
		margin-left: -43px;
	}

	.btn:hover {
		background-color: #383838;
		transition: .2s;
	}



	.boxdNUm {
		width: 100%;
	}

	.boxdNUm .title {
		width: 100%;
		height: 45px;
		text-align: center;
		line-height: 45px;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		border-radius: 5px 5px 0px 0px;
		background: linear-gradient(180deg, #9e4fff, #5235ff);
	}

	.langlist {
		width: 100%;
		background-color: rgba(158, 79, 255, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 10px 25px;
	}

	.descIt {
		width: 48%;
		height: 40px;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
		background: linear-gradient(180deg, #9e4fff, #5235ff);
		cursor: pointer;
	}

	.descItTow {
		margin-top: 15px;
	}

	/deep/.el-dialog__header {
		padding: 0px;
	}

	/deep/.el-dialog__footer {
		padding: 0px 0px 20px;
	}

	/deep/.el-dialog--center .el-dialog__body {
		padding: 0;
		font-size: 18px;
		text-align: center;
	}

	/deep/.el-dialog--center {
		border-radius: 5px;
	}
</style>